<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<link
	href="${pageContext.request.contextPath}/resources/MUI/css/mui.indexedlist.css"
	rel="stylesheet" />
<script
	src="${pageContext.request.contextPath}/resources/MUI/js/mui.indexedlist.js"></script>
</head>
<style type="text/css">
.mui-indexed-list {
	height: 100% !important;
}

.mui-search input[type=search] {
	padding-left: 30px;
	width: 65%;
	text-align: left;
}

#list, .mui-indexed-list-search {
	border: 0;
}
</style>
<form class="mui-input-group">
	<div class="mui-input-row">
		<label>ID:</label> <input type="text" class="caseNo" name="caseNo"
			placeholder="请输入储物柜ID"> <span class="must">*</span>
	</div>

	<!-- 广告  -->
	<input type="hidden" class="fileIds" name="fileIds"
		placeholder="请输入位置等描述">
		<div class="mui-content">
			<div id='list' class="mui-indexed-list">
				<div class="mui-indexed-list-search mui-input-row mui-search">
					<label>选择广告:</label> <input type="search"
						class="mui-input-clear mui-indexed-list-search-input"
						placeholder="搜索广告"> <a id='done'
						style="width: 100px; position: fixed; right: -40px; top: 50px;">完成</a>
						<span class="must">*</span>
				</div>
				<div class="mui-indexed-list-bar" style="display: none;"></div>
				<div class="mui-indexed-list-alert"></div>
				<div class="mui-indexed-list-inner">
					<div class="mui-indexed-list-empty-alert">没有数据</div>
					<ul class="mui-table-view">
						<c:forEach items="${list }" var="list">
							<li
								class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
								<input type="checkbox" value="${list.id }" />${list.name }</li>
						</c:forEach>
					</ul>
				</div>
			</div>
		</div>
		<div class="mui-input-row">
			<label>选择公司:</label> <select class="adUrl" name="compId">
				<c:forEach items="${compList }" var="list">
					<option value="${list.compId }">${list.compName }</option>
				</c:forEach>
			</select>
		</div>
		<div class="mui-input-row">
			<label>描述:</label> <input type="text" class="des" name="des"
				placeholder="请输入位置等描述">
		</div>
		<div class="mui-button-row">
			<a type="button" class="mui-btn mui-btn-primary submit">提交</a>
		</div>
</form>
<script type="text/javascript">
    	mui('#offCanvasContentScroll').scroll().scrollTo(0,0);
    
    	$(".mui-title").html("添加广告");
    	
		var list = document.getElementById('list');
		window.indexedList = new mui.IndexedList(list);

		mui('.mui-indexed-list-inner').on('change', 'input', function() {
			var checkboxArray = [].slice.call(list.querySelectorAll('input[type="checkbox"]'));
			var checkedIds = [];
			checkboxArray.forEach(function(box) {
				if (box.checked) {
					checkedIds.push(box.value);
				}
			});
			$(".fileIds").val(checkedIds);
		});
		
		$(".mui-indexed-list-inner").hide();
		$("#list").on("touchstart","input",function(){
			$(".mui-indexed-list-inner").show();
		})
		$("#done").on("touchstart",function(){
			$(".mui-indexed-list-inner").hide();
			$(".mui-input-clear").val("");
		})
		
		/* ---------------------------广告 ---------------------------- */
	   $(".submit").on("touchstart",function(){
		   var param = $("form").serialize();
	    	let caseNo = $(".caseNo").val();
	    	let fileIds = $(".fileIds").val();
	    	
	    	if(caseNo != "" && fileIds != ""){
				$.post("/publish/addAdvertise",param,function(res){
					
					if(res.success){
						mui.toast("添加成功");
						history.back();
			    	}else{
			    		mui.toast(res.message);
			    	}
					
				})
	    	}else{
	    		mui.toast("带 "+'<span style="color:red;">*</span> 为必填项');
	    	}
	   })
	   
	</script>
</html>